<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-statistic group-separator="," :value="index.todayReg" title="今日新增" />
      </el-col>
      <el-col :span="5">
        <el-statistic group-separator="," :value="index.dayActiveUser" title="日活跃" />
      </el-col>
      <el-col :span="5">
        <el-statistic group-separator="," :value="index.allUser" title="总用户" />
      </el-col>
      <el-col :span="5">
        <el-statistic group-separator="," :value="index.allQuestion" title="总问题" />
      </el-col>
      <el-col :span="5">
        <el-statistic group-separator="," :value="index.allAnswer" title="总回答" />
      </el-col>
    </el-row>
    <el-divider />
<!--    <v-md-editor-->
<!--      v-model="text"-->
<!--      :mode="mode"-->
<!--      :disabled-menus="[]"-->
<!--      @copy-code-success="handleCopyCodeSuccess"-->
<!--    />-->
    <div class="comment">
      <div></div>
      <div></div>
    </div>
    <md-editor
      ref="mdEditor"
      :mode="mdEditor.mode"
      :disabled-menus="mdEditor.disabledMenus"
      :text="mdEditor.text"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getReadmeMd, getIndex } from '@/api/sys'
import MdEditor from '@/components/MdEditor/index'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  components: {
    MdEditor
  },
  data() {
    return {
      mode: 'preview',
      text: '',
      index: {
        allUser: 0,
        todayReg: 0,
        allQuestion: 0,
        allAnswer: 0,
        dayActiveUser: 0
      },
      mdEditor: {
        text: '',
        mode: 'preview',
        disabledMenus: []
      }
    }
  },
  created() {
    this.getReadMeMd()
    this.getIndexData()
  },
  methods: {
    getReadMeMd() {
      getReadmeMd().then(resp => {
        this.text = resp.message
        this.mdEditor.text = this.text
      })
    },
    getIndexData() {
      getIndex().then(resp => {
        this.index = resp.data
      })
    },
    handleCopyCodeSuccess() {
      this.$message.success('复制成功')
      console.log(this.$refs.mdEditor.text)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.comment{
  display: flex;
  padding: 16px 0;
}
.popover{
  height: 33px;
}
  .popover-box{
    display: flex;
    align-items: center;
  }
  .user-link{
    flex: 0 0 auto;
  }
</style>
